<template>
	<view class="uni-flex uni-column">
		<view class="uni-flex uni-column" style="-webkit-justify-content: center;justify-content: center;margin-right: 12upx; height: 350upx; text-align: center;">
			<view @click="imgClick">
				<image mode="aspectFit" style="width: 234upx;height: 234upx;" src="/static/img/bluetooth/bluetooth.png" />
			</view>
		</view>
		<view v-if="bluetoothArr && bluetoothArr.length > 0">
			<uni-list>
				<!-- 水平排列，右图左文 -->
				<uni-list-item :title="item.name" v-for="(item,index) in bluetoothArr" :key="index">
					<template v-slot:footer>
						<view class="uni-thumb" style="margin: 0; margin-right: 10upx;" @click="rowClick(item)">
							<view v-if="deviceId === item.deviceId" style="display: inline-flex;">
								<text style="margin-right: 10upx; ">{{i18n.msg41 ||'Disconnect'}}</text>
								<image src="/static/img/bluetooth/Connected.png" mode="aspectFit" style="width: 44upx;height: 44upx;"></image>
							</view>
							<view v-else style="display: inline-flex;">
								<text style="margin-right: 10upx; ">{{i18n.msg40 ||'Not connected'}}</text>
								<image src="/static/img/bluetooth/notConnected.png" mode="aspectFit" style="width: 44upx;height: 44upx;  "></image>
							</view>

						</view>
					</template>
				</uni-list-item>


			</uni-list>

		</view>
		<view v-else style="text-align: center;">
			{{i18n.msg37 ||'Bluetooth is on, searching for nearby devices...'}}
			
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {

				hideDo: 0,
				bluetoothArr: [

				],
				deviceId: ''
			}
		},
		onHide() {
			// console.log('App onHide');
			this.hideDo = 1;
			this.$connection.stopBluetoothDevicesDiscovery();
		},
		onShow() {

			if (this.hideDo === 1) {
				this.hideDo = 2;
				this.$connection.startBluetoothDevicesDiscovery()
			}
		},
		onLoad() {
			this.$connection.bluetoothArrWatch = val => {
				this.deviceId = this.$connection.deviceId
				this.bluetoothArr = val
			}
			this.$connection.onLoad()
		},
		computed: {
			i18n() {
				return this.$t('message')
			},

		},
		methods: {
			imgClick() {


			},
			rowClick(item) {

				if (this.$connection.deviceId === item.deviceId) {
					this.$connection.closeBLEConnection(item.deviceId)

				} else {
					this.$connection.createBLEConnection(item.deviceId)
				}
			},

		}
	}
</script>

<style>

</style>
